<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta charset="UTF-8">
  <title>异常发布</title>
  <!-- <link rel="stylesheet" type="text/css" href="http://crm.hbcczp.com/Public/libs/vue/vux.min.css"> -->
  <link rel="stylesheet" type="text/css" href="/zcjt/data/static/vux/vux.min.css.php">
  <style>
    .weui-cells:after {
      border-bottom: none;
    }
  </style>
</head>

<body>
  <div id="app" style="height: 100%">
    <view-box>
      <router-view></router-view>
      <tabbar slot="bottom">
        <tabbar-item link="/" selected>
          <span slot="label">异常公告</span>
        </tabbar-item>
        <tabbar-item link="admin">
          <span slot="label">审核/发布</span>
        </tabbar-item>
<!--         <tabbar-item link="submit">
          <span slot="label">异常提交</span>
        </tabbar-item> -->
      </tabbar>
    </view-box>
  </div>
</body>

<script src="http://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
<script src="http://cdn.bootcss.com/vue/2.2.6/vue.min.js"></script>
<script src="http://cdn.bootcss.com/vue-router/2.2.1/vue-router.min.js"></script>
<script src="http://cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>
<script src="http://crm.hbcczp.com/Public/libs/vue/vux.min.js.php"></script>
<!-- <script src="/zcjt/data/static/vux/vux.min.js.php"></script> -->

<template id="home">
  <div>
    <group title="2017-04-04">
      <scroller lock-x @on-scroll="onScroll" ref="scrollerEvent">
        <div>
          <div v-for="item in data" class="home-item">
            <p>{{ item.department }}：</p>
            <p>{{ item.content }}</p>
            <p>审批意见：</p>
            <p>{{ item.approve }}</p>
            <p>抄送单位：</p>
            <p>{{ item.notice }}</p>
            <p>{{ item.time }}</p>
          </div>
        </div>
      </scroller>
    </group>
  </div>
</template>
<script>
  var scrollTop;
  var home = {
    template: '#home',
    components: {
      scroller: vuxScroller,
      group: vuxGroup,
    },
    data: function() {
      return {
        data: [],
        status: '',
      }
    },
    methods: {
      onScroll: function(pos) {
        if (pos.top != 0) {
          scrollTop = pos.top
        }
      },
      pull: function() {

      }
    },
    beforeCreate: function() {
      // this.$vux.loading.show({
      //   text: 'Loading'
      // })
      var _this = this
      axios.get('get_home')
        .then(function(res) {
          _this.data = res.data
          // _this.$root.$vux.loading.hide()
        })
    },
    updated: function() {
      this.$refs.scrollerEvent.reset({top: scrollTop})
    }
  }
</script>
<style>
  .home-item {
    height: 135px;
    margin: 5px;
    padding: 5px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
  }
</style>

<template id="admin">
  <div>
    <!-- <group title="2017-04-04" v-for="n in 2"> -->
      <div v-for="item in data" class="home-item" @click="popup">
        <p>异常问题：</p>
        <p>{{ item.report_content }}</p>
<!--         <p>审批意见：</p>
        <p>{{ item.admin }}</p>
        <p>抄送单位：</p>
        <p>{{ item.notice }}</p> -->
        <p>{{ item.report_time }}</p>
      </div>
    <!-- </group> -->
    <x-button type="primary" action-type="button" @click.native="popup">发布</x-button>

    <popup v-model="show" class="popup">
      <group style="width: 90%; margin: 0 5% 10px;">
        <x-textarea v-model="post.content" placeholder="请批示" :max="max"></x-textarea>
      </group>
      <x-button type="primary" action-type="button" @click.native="submit">提交</x-button>
    </popup>
  </div>
</template>

<script>
  var admin = {
    template: '#admin',
    components: {
      popup: vuxPopup,
      group: vuxGroup,
      xButton: vuxXButton,
      xTextarea: vuxXTextarea
    },
    data: function() {
      return {
        data: [],
        show: false,
        max: 140,
        post: {
          content: ''
        }
      }
    },
    methods: {
      popup: function() {
        this.show = true
      },
      submit: function() {
        this.show = false
      }
    },
    created: function() {
      var _this = this
      this.$vux.loading.show({
        text: 'Loading'
      })
      axios.get('get_admin')
        .then(function(res) {
          _this.data = res.data
          _this.$root.$vux.loading.hide()
        })
    },
  }
</script>
<template id="submit">
  <!-- <popup v-model="show" height="80%"> -->
  <div>
    <img :src="user.avatar" style="width: 40px; height: 40px; border-radius: 50%;">
    <div v-text="user.name"></div>
    <popup v-model="show" class="popup">
      <group style="width: 90%; margin: 0 5% 10px;">
        <x-textarea v-model="post.content" placeholder="请输入异常问题" :max="max"></x-textarea>
        <x-button type="primary" action-type="button" @click.native="submit">提交</x-button>
        <x-button type="primary" action-type="button" @click.native="toCurrent">返回</x-button>
      </group>
      <div @click="submit" class="submit-btn">提交</div>
    </popup>
  </div>

  <!-- </popup> -->
</template>

<script>
  var submit = {
    template: '#submit',
    components: {
      popup: vuxPopup,
      group: vuxGroup,
      xTextarea: vuxXTextarea,
      xButton: vuxXButton,
    },
    data: function() {
      return {
        show: false,
        max: 140,
        post: {
          content: ''
        },
        user: {}
      }
    },
    methods: {
      submit: function() {
        var _this = this
        axios.post('post_report_content', JSON.stringify(this.post))
          .then(function(res) {
            _this.$vux.alert.show({
              title: '异常处理',
              content: res.data.callback,
              // onShow: function() {
              //   console.log('Plugin: I\'m showing')
              // },
              // onHide: function() {
              //   console.log('Plugin: I\'m hiding')
              // }
            })

          })
      },
      toCurrent: function() {
        this.$router.push('/')
      }
    },
    beforeCreate: function() {
      var _this = this
      axios.get('get_user')
        .then(function(res) {
          console.log(res.data)
          _this.user = res.data
        })
    }
  }
</script>

<script>
  FastClick.attach(document.body)
  Vue.use(VueRouter)
  Vue.use(vuxLoadingPlugin)
  Vue.use(vuxAlertPlugin)

  var routes = [{
    path: '/',
    component: home
  }, {
    path: '/admin',
    component: admin
  }, {
    path: '/submit',
    component: submit
  }]

  var router = new VueRouter({
    routes
  })

  new Vue({
    el: '#app',
    router,
    components: {
      viewBox:    vuxViewBox,
      tabbar:     vuxTabbar,
      tabbarItem: vuxTabbarItem,
    },
    data: {
      userInfo: <?php echo ($user_info); ?>,
    },
  })
</script>

</html>